<template>
    <el-form-item label="appid">
        <el-input v-model="data.appid" />
    </el-form-item>
    <el-form-item label="appsec">
        <el-input v-model="data.appsec" />
    </el-form-item>
    <el-form-item label="商户ID">
        <el-input v-model="data.mch_id" />
    </el-form-item>
    <el-form-item label="交易类型">
        <el-select v-model="data.trade_type" clearable placeholder="请选择" @change="changeTradeType">
            <el-option
            v-for="item in subtypes"
            :key="item.value"
            :label="item.name"
            :value="item.value"
            />
        </el-select>
    </el-form-item>
    <el-form-item label="支付证书">
        <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
        >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
            <div class="el-upload__tip">
                jpg/png files with a size less than 500KB.
            </div>
            </template>
        </el-upload>
    </el-form-item>
</template>


<script lang="ts" setup>
import { ref, } from 'vue'


const subtypes = [{
    //交易类型 JSAPI--JSAPI支付（或小程序支付）、NATIVE--Native支付、APP--app支付，MWEB--H5支付，不同trade_type决定了调起支付的方式，请根据支付产品正确上传
    name: "JSAPI支付（或小程序支付）",
    value: "JSAPI"
}, {
    name: "Native支付",
    value: "NATIVE"
}, {
    name: "app支付",
    value: "APP"
}, {
  name: "H5支付",
  value: "MWEB"
}, {
  name: "二维码支付",
  value: "scan"
}, {
  name: "扫码支付",
  value: "pos"
}];

let extra = defineProps({
    data: {
        type: Object,
        default: () => ({
            appid: "",
            appsec: "",
            mch_id: "",
            trade_type: ""
        })
    }
})

let uploadUrl = ref("")

const changeTradeType = (label: string) => {
    console.log(label)
}
</script>